<template>
	<view>
		<u-navbar class="slot-wrap" title="用户注册" :is-back="true" :background="navbgcolor" z-index="10" title-color="#fff">
			<view class="search-wrap" style="margin: 0 20rpx;flex: 1;">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
			</view>
		</u-navbar>
		<view style="padding: 30rpx;">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="用户名" prop="username" label-width="150">
					<u-input :border="border" placeholder="请输入用户名" v-model="model.username" type="text"></u-input>
				</u-form-item>
			<!-- 	<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="用户邮箱" prop="email" label-width="150">
					<u-input :border="border" placeholder="请输入用户邮箱" v-model="model.email" type="text"></u-input>
				</u-form-item> -->
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="手机号码" prop="mobile" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				<!-- <u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
					<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item> -->
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="密码" prop="password" label-width="150">
					<u-input :border="border" placeholder="请输入登录密码" v-model="model.password" type="text"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="确认密码" prop="repassword" label-width="150">
					<u-input :border="border" placeholder="请再次输入登录密码" v-model="model.repassword" type="text"></u-input>
				</u-form-item>
				<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 -->
				<!-- <u-form-item :label-position="labelPosition" label="记住密码" prop="remember" label-width="150">
					<u-switch v-model="model.remember" slot="right"></u-switch>
				</u-form-item> -->
			</u-form>
			<u-toast ref="uToast" />
			<u-button @click="submit" style="position: fixed;bottom: 50rpx;width: calc(100% - 60rpx);left: 30rpx;" type="success">注册</u-button>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					username:'',
					mobile:null,
					// code:null,
					password:'',
					repassword:''
				},
				checked:false,
				labelPosition:'left',
				codeTips:'',
				errorType: ['message'],
				rules: {
					username: [
						{
							required: true,
							message: '请输入用户名',
							trigger: ['change','blur'],
						}
					],
					// email:[
					// 	{
					// 		required: true,
					// 		message: '请输入用户邮箱',
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					// 			return this.$u.test.email(value);
					// 		},
					// 		message: '用户邮箱不正确',
					// 		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					// 		trigger: ['change','blur'],
					// 	}
					// ],
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					// code: [
					// 	{
					// 		required: true,
					// 		message: '请输入验证码',
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		type: 'number',
					// 		message: '验证码只能为数字',
					// 		trigger: ['change','blur'],
					// 	}
					// ],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					repassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
			}
		},
		methods: {
			checkboxGroupChange(){
				console.log(this.checked)
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			// getCode() {
			// 	if(this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		uni.showLoading({
			// 			title: '正在获取验证码',
			// 			mask: true
			// 		})
			// 		uni.request({
			// 		    url: 'http://43.132.175.66/api/sms/send', //仅为示例，并非真实接口地址。
			// 			method:'post',
			// 		    data: datas,
			// 		    header: {
			// 		    },
			// 		    success: (res) => {
			// 				uni.hideLoading();
			// 		        console.log(res.data);
			// 				if(res.data.code == 0){
			// 					this.$refs.uToast.show({
			// 						title: res.data.msg,
			// 						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
			// 						type: 'error', 
			// 						// 如果不需要图标，请设置为false
			// 						// icon: false
			// 					})
			// 					return
			// 				};
			// 		    }
			// 		});
			// 		setTimeout(() => {
			// 			uni.hideLoading();
			// 			// 这里此提示会被this.start()方法中的提示覆盖
			// 			this.$u.toast('验证码已发送');
			// 			// 通知验证码组件内部开始倒计时
			// 			this.$refs.uCode.start();
			// 		}, 2000);
			// 	} else {
			// 		this.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.Logins();
					} else {
						console.log('验证失败');
					}
				});
			},
			Logins(){
				uni.showLoading({
					title: '注册中...',
					mask: true
				})
				var datas = JSON.parse(JSON.stringify(this.model));
				delete datas['repassword'];
				uni.request({
				    url: 'http://43.132.175.66/api/user/register', //仅为示例，并非真实接口地址。
					method:'post',
				    data: datas,
				    header: {
				    },
				    success: (res) => {
						uni.hideLoading();
				        console.log(res.data);
						if(res.data.code != 1){
							this.$refs.uToast.show({
								title: res.data.msg,
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								// icon: false
							})
							return
						};
						this.$refs.uToast.show({
							title: res.data.msg,
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'success', 
							// 如果不需要图标，请设置为false
							// icon: false
						})
						setTimeout(()=>{
							uni.$u.route({
								type:'back'
							})
						},800)
				    }
				});
			
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>
